<template>
  <el-dialog :modelValue="visiable" title="区段" width="800" @closed="emit('closed')">
    <!-- search -->
    <div class="flex justify-between items-center mb-5">
      <el-input
        v-model="search"
        placeholder="请输入区段名称"
        style="width: 240px"
        clearable
        class="mr-2"
        @input="searchChange" />
      <!-- <el-button type="primary" size="default" @click="searchChange">查询</el-button> -->
      <div class="flex flex-col justify-center items-center bg-[#009432] w-20 h-10 rounded-[5px]">
        <div class="text-gray-100 text-lg">
          {{ numLine / 1000 }}
          <span class="text-[#bdc3c7] text-[10px] -ml-1">km</span>
        </div>
        <span class="text-[#bdc3c7] text-[10px] -mt-2">区段长度</span>
      </div>
    </div>

    <!-- 表格 -->
    <el-table :data="bets?.data" border center>
      <el-table-column type="expand">
        <template #default="props">
          <div class="mx-4 my-2">
            <el-table :data="props.row.across" border center size="small">
              <el-table-column property="acrossName" label="控制点名称" align="center">
                <template #default="scope">
                  <el-tag type="danger">{{ scope.row.acrossName }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="X" align="center">
                <template #default="scope">
                  <div>{{ scope.row.acrossX }}m</div>
                </template>
              </el-table-column>
              <el-table-column label="Y" align="center">
                <template #default="scope">
                  <div>{{ scope.row.acrossY }}m</div>
                </template>
              </el-table-column>
              <el-table-column label="控制高度" align="center">
                <template #default="scope">
                  <div class="flex justify-center items-center gap-1">
                    <Ruler theme="outline" size="14" fill="#EE5A24" />
                    <div>{{ scope.row.controlHeight }}m</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>

      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column label="区段名称">
        <template #default="scope">
          <div class="flex gap-2 items-center">
            <Clue theme="outline" size="16" fill="#2980b9" />
            <span>{{ scope.row.btName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="档距" width="120">
        <template #default="scope">
          <div class="flex gap-1 items-center">
            <Ruler theme="outline" size="16" fill="#2980b9" />
            <div>
              {{ scope.row.btSpan }}
              <span class="text-xs">m</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="控制点数量" align="center" width="100">
        <template #default="scope">
          <el-tag type="primary" v-if="scope.row.across.length <= 1">{{ scope.row.across.length }}</el-tag>
          <el-tag type="danger" v-if="scope.row.across.length > 1">{{ scope.row.across.length }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="50" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="edit(scope.row)">
            <FileEditingOne theme="outline" size="16" fill="#34495e" />
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="">
      <el-pagination
        background
        layout="prev, pager, next, total"
        v-model:current-page="currentPage"
        :total="bets?.meta.total"
        class="mt-5"
        @current-change="currentChange" />
    </div>
  </el-dialog>

  <DialogBetEdit :visiable="betEditVisiable" :selectBet="selectBet" @closed="betEditClose" />
</template>

<script lang="ts" setup>
import useBet from '@/composables/useBet'
import { Clue, FileEditingOne, Ruler } from '@icon-park/vue-next'
import { ref } from 'vue'
import DialogBetEdit from './DialogBetEdit.vue'
import { betModel } from '@/types/model'
const prop = defineProps(['visiable', 'sectionId'])
const emit = defineEmits(['closed'])
const search = ref('')
const currentPage = ref(1)
const numLine = ref(0)
const betEditVisiable = ref(false)
const selectBet = ref<betModel>()

const { bets, all: allBet } = useBet()

const searchChange = async () => {
  await allBet({ sectionId: prop.sectionId, search: search.value, page: currentPage.value })
}

const currentChange = async () => {
  await allBet({ sectionId: prop.sectionId, search: search.value, page: currentPage.value })
}

const edit = (data: betModel) => {
  betEditVisiable.value = true
  selectBet.value = data
}

const betEditClose = () => {
  betEditVisiable.value = false
}

const total = async () => {
  await allBet({ sectionId: prop.sectionId })
  for (const bet of bets.value?.data!) {
    numLine.value += bet.btSpan
  }
}

total()
allBet({ sectionId: prop.sectionId, search: search.value, page: currentPage.value })
</script>
